<template>
  <view class="container">
    <view class="header">
      <image class="avatar" src="@/static/images/3.png"></image>
       <view class="info">
              <text class="greeting">Hi, {{ ownerName }}</text>
            </view>
      <button class="bind-button" @click="toggleHouseModal">绑定房屋</button>
    </view>
	<!-- 房屋选择弹窗 -->
	    <view v-if="showHouseModal" class="modal">
	      <view class="modal-content">
	        <text>选择房屋</text>
	        <view v-for="house in houses" :key="house.id" class="house-item" @click="selectHouse(house)">
	          {{ house.huoseNo }}
	        </view>
	        <button @click="toggleHouseModal">关闭</button>
	      </view>
	    </view>

    <view class="menu">
      <view class="menu-item" @click="showMyHouses">
        <image class="icon" src="@/static/images/house.png"></image>
        <text>我的房子</text>
      </view>
      <view class="menu-item">
        <image class="icon" src="@/static/images/member.png"></image>
        <text>我的成员</text>
      </view>
    </view>

    <view class="list">
      <view class="list-item">我的订单</view>
      <view class="list-item" @click="navigateToRepair">我的报修</view>
      <view class="list-item">意见反馈</view>
      <view class="list-item">缴费记录</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      ownerName: '加载中...' ,// 初始化业主姓名
	  phoneNum:'',
	   showHouseModal: false, // 控制弹窗显示
	        houses: [] // 存储房屋数据
	  
    };
  },
  onLoad() {
      // 页面加载时的逻辑
	  console.log('onLoad 被调用');
        this.fetchOwnerName();
  },
  methods: {
      fetchOwnerName() {
           // 从storage中获取phoneNum
           const phoneNumber = wx.getStorageSync('phoneNumber');
		   console.log('获取到的 phoneNum:', phoneNumber);
                 wx.request({
                      url: `http://127.0.0.1:8500/own/queryOwner?phoneNum=${phoneNumber}`,
                      method: 'POST',
                      success: (res) => {
                        console.log('请求成功:', res.data);
                        if (res.data.code==200) {
							console.log('获取到的 ownerName:', res.data.data.ownerName);
                          this.ownerName = res.data.data.ownerName;
						  
                        } else {
                          this.ownerName = '未知业主';
                        }
                      },
                      fail: (error) => {
                        console.error('请求失败', error);
                        this.ownerName = '加载失败';
                      }
                    });
         },
		  toggleHouseModal() {
		       this.showHouseModal = !this.showHouseModal;
		       if (this.showHouseModal) {
		         this.fetchHouses();
		       }
		     },
		     fetchHouses() {
		       wx.request({
		         url: 'http://127.0.0.1:8500/own/queryKong',
		         method: 'GET',
		         success: (res) => {
		           console.log('获取房屋数据成功:', res.data);
		           if (res.data.code == 200) {
		             this.houses = res.data.data;
		           } else {
		             console.error('获取房屋数据失败');
		           }
		         },
		         fail: (error) => {
		           console.error('请求房屋数据失败', error);
		         }
		       });
		     },
		      selectHouse(house) {
				    const phoneNumber = wx.getStorageSync('phoneNumber');
					
		           console.log('选择的房屋:', house);
		           // 发送房间ID到后端
		           wx.request({
		             url: `http://127.0.0.1:8500/own/selectHouse?id=${house.id}&phoneNum=${phoneNumber}`,
		             method: 'POST',
		             success: (res) => {
		               console.log('房间选择成功:', res.data);
		               // 可以在这里处理成功选择房间后的逻辑
		             },
		             fail: (error) => {
		               console.error('房间选择失败', error);
		             }
		           });
		           this.toggleHouseModal();
		         },
				 showMyHouses() {
				       this.showHouseModal = true;
				       const phoneNumber = wx.getStorageSync('phoneNumber');
				       wx.request({
				         url: `http://127.0.0.1:8500/own/queryMyHouse?phoneNum=${phoneNumber}`,
				         method: 'POST',
				         success: (res) => {
				           console.log('获取我的房子数据成功:', res.data);
				           if (res.data.code == 200) {
				             this.houses = res.data.data;
				           } else {
				             console.error('获取我的房子数据失败');
				           }
				         },
				         fail: (error) => {
				           console.error('请求我的房子数据失败', error);
				         }
				       });
				     },
					  navigateToRepair() {
					     uni.navigateTo({
					       url: '/pages/myrepair/myrepair'
					     });
					   }
    }
};
</script>

<style>
.container {
  background-image: url('@/static/images/3.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  margin-bottom: 20px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.info {
  flex: 1;
  margin-left: 10px;
}

.greeting {
  font-size: 18px;
  font-weight: bold;
}

.address {
  font-size: 14px;
  color: #666;
}

.bind-button {
  background-color: #ffcc00;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
}

.menu {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.menu-item {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 10px;
  width: 45%;
}

.icon {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.list {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 10px;
}

.list-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.list-item:last-child {
  border-bottom: none;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
}

.house-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.house-item:last-child {
  border-bottom: none;
}
</style>

